<template>
  <div>
    <!-- 增删改查：
         增：表单
         改：表单
         查：表格
-->
    <el-input ref="xxx" v-model="txt" prefix-icon="el-icon-user-solid" @focus="focusEvent">
      <template #suffix>
        <div>
          123
        </div>
      </template>
    </el-input>

    <el-input v-model="txt" />
    <Son ref="son" />
    <button @click="btnClick">点击时调用son内的方法</button>
    <button @click="btnClick2">点击时调用input内的方法</button>

    <hr>
    <el-form>
      <el-form-item>
        <el-input class="xxx" />
      </el-form-item>
      <el-form-item>
        <el-input />
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import Son from './components/son.vue'
export default {
  components: {
    Son
  },
  data() {
    return {
      txt: ''
    }
  },
  methods: {
    focusEvent() {
      console.log('focusEvent')
    },
    btnClick() {
      this.$refs.son.validate()
    },
    btnClick2() {
      this.$refs.xxx.focus()
    }
  }
}
</script>
<style lang="scss" scoped>
.xxx{

  ::v-deep .el-input__inner{
    height:80px;
  }
}

</style>
